<template>
  <div class="article-container">
    <van-nav-bar
      title="文章详情"
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
    />
    
    <div class="article-content">
      <div class="header">
        <h1 class="title">{{ article.title }}</h1>
        <div class="meta">
          <div class="author">
            <van-image
              round
              width="24"
              height="24"
              :src="article.authorAvatar"
            />
            <span>{{ article.author }}</span>
          </div>
          <div class="info">
            <span class="time">
              <van-icon name="clock-o" />
              {{ article.time }}
            </span>
            <span class="views">
              <van-icon name="eye-o" />
              {{ article.views }}阅读
            </span>
          </div>
        </div>
        <div class="tags" v-if="article.tags && article.tags.length">
          <van-tag
            v-for="tag in article.tags"
            :key="tag"
            plain
            type="primary"
            size="medium"
            class="tag"
          >{{ tag }}</van-tag>
        </div>
      </div>

      <div class="content markdown-body" v-html="article.content"></div>
      
      <div class="actions">
        <div class="action-item" @click="onLike">
          <van-icon 
            :name="article.isLiked ? 'like' : 'like-o'" 
            :class="{ active: article.isLiked }"
          />
          <span>{{ article.likes }}</span>
        </div>
        <div class="action-item" @click="onCollect">
          <van-icon 
            :name="article.isCollected ? 'star' : 'star-o'"
            :class="{ active: article.isCollected }"
          />
          <span>{{ article.collects }}</span>
        </div>
        <div class="action-item" @click="onShare">
          <van-icon name="share-o" />
          <span>分享</span>
        </div>
      </div>

      <!-- 相关推荐 -->
      <div class="related-articles" v-if="relatedArticles.length">
        <div class="section-title">相关推荐</div>
        <div class="article-list">
          <div 
            v-for="item in relatedArticles" 
            :key="item.id"
            class="article-item"
            @click="onArticleClick(item)"
          >
            <div class="article-cover" v-if="item.cover">
              <van-image :src="item.cover" fit="cover" />
            </div>
            <div class="article-brief">
              <div class="article-title">{{ item.title }}</div>
              <div class="article-meta">
                <span>{{ item.views }}阅读</span>
                <span>{{ item.likes }}点赞</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 底部占位，防止操作栏遮挡内容 -->
      <div class="bottom-placeholder" style="height: 60px;"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()
const route = useRoute()

const article = ref({
  title: '如何提高学习效率？',
  author: '张三',
  authorAvatar: 'https://picsum.photos/200',
  time: '2024-01-20',
  views: 1234,
  likes: 88,
  collects: 45,
  isLiked: false,
  isCollected: false,
  tags: ['学习方法', '效率提升', '时间管理'],
  content: `
    <h2>引言</h2>
    <p>在当今快节奏的社会中，如何提高学习效率成为了每个学习者都关心的问题。本文将从多个角度分析提高学习效率的方法。</p>

    <h2>1. 制定合理的学习计划</h2>
    <p>一个好的学习计划是提高学习效率的基础。以下是制定学习计划的关键点：</p>
    <ul>
      <li>明确学习目标</li>
      <li>合理分配时间</li>
      <li>设定阶段性目标</li>
      <li>保持计划的灵活性</li>
    </ul>

    <h2>2. 保持良好的作息习惯</h2>
    <p>充足的睡眠和规律的作息是提高学习效率的基础。研究表明，良好的睡眠质量能够：</p>
    <ul>
      <li>提高注意力集中度</li>
      <li>增强记忆力</li>
      <li>改善学习状态</li>
    </ul>

    <h2>3. 使用正确的学习方法</h2>
    <p>针对不同的学科，应该采用不同的学习方法：</p>
    <ul>
      <li>理论学科：理解为主，多做笔记</li>
      <li>实践学科：多动手，及时复盘</li>
      <li>语言学科：多听多说，沉浸式学习</li>
    </ul>

    <h2>总结</h2>
    <p>提高学习效率不是一蹴而就的事情，需要我们持之以恒地坚持正确的学习方法和良好的习惯。希望本文的建议能够帮助到你。</p>
  `
})

const relatedArticles = ref([
  {
    id: 1,
    title: '高效学习的10个秘诀',
    cover: 'https://picsum.photos/300/200',
    views: 800,
    likes: 56
  },
  {
    id: 2,
    title: '如何科学地安排学习时间',
    cover: 'https://picsum.photos/300/200',
    views: 650,
    likes: 42
  }
])

const onClickLeft = () => {
  router.back()
}

const onLike = () => {
  article.value.isLiked = !article.value.isLiked
  article.value.likes += article.value.isLiked ? 1 : -1
  showToast(article.value.isLiked ? '已点赞' : '已取消点赞')
}

const onCollect = () => {
  article.value.isCollected = !article.value.isCollected
  article.value.collects += article.value.isCollected ? 1 : -1
  showToast(article.value.isCollected ? '已收藏' : '已取消收藏')
}

const onShare = () => {
  showToast('分享功能开发中')
}

const onArticleClick = (article) => {
  router.push(`/article/${article.id}`)
}

onMounted(async () => {
  // 获取文章详情
  const id = route.params.id
  // TODO: 调用接口获取文章详情
})
</script>

<style lang="scss" scoped>
@use '@/styles/mixins.scss' as *;

.article-container {
  min-height: 100vh;
  background-color: #fff;

  .article-content {
    padding: 16px;

    .header {
      margin-bottom: 24px;

      .title {
        font-size: 24px;
        font-weight: bold;
        color: #323233;
        margin-bottom: 16px;
        line-height: 1.4;
      }

      .meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 16px;
        font-size: 14px;
        color: #969799;

        .author {
          @include flex(row, flex-start, center);
          margin-right: 16px;
          margin-bottom: 8px;

          .van-image {
            margin-right: 8px;
          }
        }

        .info {
          @include flex(row, flex-start, center);
          flex-wrap: wrap;

          span {
            @include flex(row, flex-start, center);
            margin-right: 16px;
            margin-bottom: 8px;

            .van-icon {
              margin-right: 4px;
              font-size: 16px;
            }
          }
        }
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        .tag {
          margin-bottom: 8px;
        }
      }
    }

    .content {
      font-size: 16px;
      line-height: 1.8;
      color: #323233;
      margin-bottom: 32px;

      h2 {
        font-size: 20px;
        font-weight: bold;
        margin: 24px 0 16px;
        color: #323233;
      }

      p {
        margin-bottom: 16px;
        text-align: justify;
      }

      ul {
        margin-bottom: 16px;
        padding-left: 20px;

        li {
          margin-bottom: 8px;
          position: relative;
          
          &::before {
            content: '';
            position: absolute;
            left: -20px;
            top: 8px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #1989fa;
          }
        }
      }
    }

    .actions {
      position: sticky;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-around;
      padding: 12px 0;
      background: #fff;
      border-top: 1px solid #f5f5f5;
      margin: 0 -16px;

      .action-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;

        .van-icon {
          font-size: 24px;
          margin-bottom: 4px;
          color: #666;
          transition: all 0.3s;

          &.active {
            &[name="like"], &[name="like-o"] {
              color: #ff4757;
            }
            &[name="star"], &[name="star-o"] {
              color: #ffd700;
            }
          }
        }

        span {
          font-size: 12px;
          color: #666;
        }
      }
    }

    .related-articles {
      margin-top: 32px;
      padding-top: 24px;
      border-top: 8px solid #f7f8fa;

      .section-title {
        font-size: 18px;
        font-weight: 500;
        color: #323233;
        margin-bottom: 16px;
      }

      .article-list {
        .article-item {
          display: flex;
          margin-bottom: 16px;
          cursor: pointer;
          padding: 12px;
          background: #f7f8fa;
          border-radius: 8px;
          transition: all 0.3s;

          &:last-child {
            margin-bottom: 0;
          }

          &:hover {
            background: #f0f2f5;
          }

          .article-cover {
            width: 120px;
            height: 80px;
            margin-right: 12px;
            border-radius: 4px;
            overflow: hidden;

            .van-image {
              width: 100%;
              height: 100%;
            }
          }

          .article-brief {
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .article-title {
              font-size: 15px;
              color: #323233;
              margin-bottom: 8px;
              line-height: 1.4;
              @include text-ellipsis-multi(2);
            }

            .article-meta {
              font-size: 12px;
              color: #969799;

              span {
                margin-right: 12px;

                &:last-child {
                  margin-right: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
